<script setup>

import {Search,Promotion} from '@element-plus/icons-vue'
import {ref,inject} from 'vue'
import {useRouter,useRoute} from "vue-router";
import request from '@/utils/http';
import app from "@/App.vue";
import App from "@/App.vue";
import {insertSearchRecord} from "@/apis/user";


var router = useRouter()
var input = ref('')

const globalVariable = inject('globalVariable')
const submit= async () => {
    var user = JSON.parse(sessionStorage.getItem('user'))//
    // alert(input.value)
    // alert(user.id)
    update(input.value,user.id)//

    try {
        await request.post('/keywordSearch',{
            keyword:input.value
        })
        globalVariable.value = input.value
        router.push({ name: 'resultView', params: { keyword: input.value } })
    } catch (error){
        console.error(error)
    }

}
//
const update =  (keyword,id)=>{
    // alert(keyword)
    // alert(id)
    insertSearchRecord(keyword,id);
}
//
</script>

<template>
  <TopBar />
  <div id="page" >
  <div class="mainDomain">

  <div class="searchBlock">
    <div class="txt">
      <h1>关键词搜索引擎</h1>
    </div>
    <div class="inputArea">
      <el-input
          v-model="input"
          class="input"
          placeholder="请输入关键词"
          :prefix-icon="Search"
      />
      <el-button class="submit" @click="submit" type="primary" :icon="Promotion" circle />
    </div>
  </div>
  </div>
  </div>
</template>

<style scoped>
.mainDomain{
  height:100%;
  width:100%;
  position:fixed;
  background-image: url("../assets/login-background.png");
  background-size: 100% 100%;
}
.searchBlock{
  position: relative;
  width: 50%;
  height: 50%;
  top:18%;
  left:25%;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.6);
}
.txt{
  font-size: larger;
  text-align: center;
  position: relative;
  height:50%;
  padding-top: 10%;
  color: white;
}
.inputArea{
  position: relative;
  left: 10%;
  width:80%;
  height:25%;
  padding: 50px 0 0 0;
}
.input{
  height: 50px;
}
.submit{
  position: absolute;
  bottom:4%;
  right:2%;
}
</style>
